{% extends 'course-manage/layout.html.twig' %}

{% block title %}{{'course.announcement_manage'|trans}} - {{ course.title }} - {{ parent() }}{% endblock %}
{% do script(['app/js/announcement/announcement/index.js'])%}
{% set course_side_nav = 'announcements' %}
{% block main_heading_class %}course-main-header{% endblock %}
{% block main_heading %}
  {% include 'course-manage/panel-header/course-publish-header.html.twig' with {code: course_side_nav, btnGroup:1} %}
{% endblock %}

{% block main_body %}
  <div class="announcement-list">
    {% if announcements %}
      {% for announcement in announcements %}
        <div class="alert alert-default alert-edit clearfix" role="alert">
          <div class="alert-header">
            <i class="icon-click es-icon es-icon-chevronright"></i>
            <span class="title">
              {{ announcement.content|plain_text(40) }}
            </span>

            {% if canManage %}
              <span class="editor">
                {{ announcement.createdTime|date('Y-m-d') }}
                <a class="mlm" data-target="#modal"  data-toggle="modal" data-url="{{ path('announcement_update',{id:announcement.id, targetType:targetType,  targetId:targetId}) }}"><i class="es-icon es-icon-edit" data-toggle="tooltip" data-placement="top" title="{{'announcement.modal.edit_btn'|trans}}"></i></a>
                <a href="javascript:;" data-role="delete" data-url="{{ path('announcement_delete',{id:announcement.id, targetType:targetType, targetId:targetId}) }}"><i class="es-icon es-icon-delete ml10" data-toggle="tooltip" data-placement="top" title="{{'announcement.modal.delete_btn'|trans}}"></i></a>
              </span>
            {% else %}
              <span class="data">{{ announcement.createdTime|date('Y-m-d H:i:s') }}</span>
            {% endif %}

          </div>
          <div class="details">
            {{ announcement.content|raw }}
          </div>
        </div>

      {% endfor %}
    {% else %}
      <div class="alert alert-edit" align="center">{{'announcement.empty'|trans}}</div>
    {% endif %}
  </div>
{% endblock %}